<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="node_modules/jquery/dist/jquery.min.js"></script>
  <script src="node_modules/echarts/dist/echarts.min.js"></script>
</head>
<body>
  <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
  <div id="today-pv-iv" style="width: 100%;height:400px;"></div>
  <div id="today-district" style="width: 45%;height:400px;display: inline-block;float: left"></div>
  <div id="today-browser" style="width: 45% ;height:400px;float: right"></div>
  <script type="text/javascript">
    var pieOptionTpl = function(titleText, arr) {
      return {
        backgroundColor: '#2c343c',
        title: {
          text: titleText,
          left: 'center',
          top: 20,
          textStyle: {
            color: '#ccc'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1]
          }
        },
        series: [{
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '50%'],
          data: arr.sort(function(a, b) {
            return a.value - b.value
          }),
          roseType: 'angle',
          label: {
            normal: {
              textStyle: {
                color: 'rgba(255, 255, 255, 0.3)'
              }
            }
          },
          labelLine: {
            normal: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)'
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            }
          },
          itemStyle: {
            normal: {
              color: '#c23531',
              shadowBlur: 200,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }],
      };
    };

    function renderChartTpl(symbol, ajaxUrl, pivId, districtPieId, browserPieId) {
      $.ajax({
        url: ajaxUrl,
        dataType: 'jsonp',
        success: function(data) {
          var piChart = echarts.init(document.getElementById(pivId));
          var dpChart = echarts.init(document.getElementById(districtPieId));
          var bpChart = echarts.init(document.getElementById(browserPieId));

          var piOption = {
            title: {
              text: '访问趋势'
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: [symbol + '浏览量', symbol + '独立IP']
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: data.pv.keys
            },
            yAxis: {
              type: 'value',
            },
            series: [{
              name: symbol + '浏览量',
              type: 'line',
              stack: '总量',
              data: data.pv.values
            }, {
              name: symbol + '独立IP',
              type: 'line',
              stack: '总量',
              data: data.iv.values
            }]
          };

          var dpcOption = pieOptionTpl('访客区域', data.districtObjArr);

          var bpcOption = pieOptionTpl('浏览器比例', data.browserObjArr);

          piChart.setOption(piOption);
          dpChart.setOption(dpcOption);
          bpChart.setOption(bpcOption);
        }
      });
    }

    renderChartTpl('今日', 'http://127.0.0.1:8080/v1/day/today', 'today-pv-iv', 'today-district', 'today-browser');
  </script>
</body>
</html>